<template>
	<view class="seller-view">
		<view class="u-flex u-row-between">
            <view class="u-flex u-flex-3" @click="goSeller()">
				<u-image mode="widthFix"   width="100rpx"  :src="shopInfo.shop_logo" v-if="shopInfo.shop_logo"></u-image>
                <u-image mode="widthFix" width="100rpx"   src="/static/images/icon-no-shop-logo.png" v-else></u-image>
                <view class="seller-name u-margin-left-10 u-flex">
                    <text  style="vertical-align: middle;word-break: break-all; margin-left: 10rpx;">{{shopInfo.shop_name}}</text>
                    <text class="self u-m-l-10 u-m-r-10" v-if="shopInfo.self_operated">自营</text>
                </view>
            </view>

        </view>
        <view class="seller-tabs-view u-flex u-row-between u-text-center">
            <view class="seller-tab">
                <view>商品描述&nbsp;<text class="text-red">{{shopInfo.shop_description_credit}}</text></view>
            </view>
            <view class="seller-tab">
                <view>卖家信用&nbsp;<text class="text-red">{{shopInfo.shop_credit}}</text></view>
            </view>
            <view class="seller-tab">
                <view>物流服务&nbsp;<text class="text-red">{{shopInfo.shop_delivery_credit}}</text></view>
            </view>
        </view>
        <view class="content-box">
            <!-- <u-button class='qb' type="error" shape="circle" size="mini" plain @click="goSellerAllGoods()">全部商品</u-button> -->
                    <span class='all-products' type="error" shape="circle" size="mini" plain @click="goSellerAllGoods()">全部商品</span>
                    <span class='shop-shopping' type="error" shape="circle" size="mini" plain @click="goSeller()">进店逛逛</span>
                    <!-- <u-button class="u-margin-left-10" type="warning" shape="circle" size="mini" @click="goSeller()">进店逛逛</u-button> -->
        </view>
	</view>
</template>

<script>
    import * as API_Shop from '@/api/shop.js'

	export default {
		data() {
			return {
                shopInfo: {},
			};
		},
        props: {
            sellerId: {
                type: String,
                default: ''
            }
        },
        mounted() {
            setTimeout(() => {
                this.getSeller();
            },500)
        },
        watch: {
            shopInfo(newVal) {
                this.$emit('self-change', newVal.self_operated)
            }
        },
        methods: {
            getSeller(){
                API_Shop.getShopBaseInfo(this.sellerId).then(res => {
                    this.shopInfo = res;
                })
            },
            goSellerAllGoods(){
                const _shopInfo = {
                    shop_id: this.shopInfo.shop_id,
                    shop_name: this.shopInfo.shop_name,
                    shop_logo: this.shopInfo.shop_logo,
                    tabNum: 1,
                };
                this.navigateTo(`/pages/shop/shop${this.$u.queryParams(_shopInfo, true, 'indices')}`)
            },
            goSeller(){
                const _shopInfo = {
                    shop_id: this.shopInfo.shop_id,
                    shop_name: this.shopInfo.shop_name,
                    shop_logo: this.shopInfo.shop_logo,
                    tabNum: 0,
                };
                this.navigateTo(`/pages/shop/shop${this.$u.queryParams(_shopInfo, true, 'indices')}`)
            }
        }
	}
</script>

<style lang="scss">
    .seller-view {
        border-radius: 15rpx;
        margin-top: 23rpx;
        background-color: #FFFFFF;
        padding: 20rpx;
        .seller-name {
            margin-left: 20rpx;
            font-weight: 600;
            display: contents;
        }
        .seller-tabs-view {
            margin-top: 35rpx;
            margin-bottom: 10rpx;
            .seller-tab {
                width: 200rpx;
                font-size: 25rpx;
                color: #909399;
                .text-red{
                    color: red;
                    margin-left: 10rpx;
                }
            }
        }
        .content-box{
            width: 50%;
            margin: 40rpx auto 10rpx;
            display:flex;
            .all-products {
                flex: 1;
            	color: #ff5000 !important;
            	border:1px solid #ff5000 !important;
            	background-color: #fef0f0 !important;
            	line-height: 42rpx;
            	padding: 2rpx 20rpx;
            	border-radius: 32rpx;
            	font-size: 24rpx;
            	margin-top:-8px;
                text-align: center;
            }
            .shop-shopping {
                flex: 1;
            	color: #ffff !important;
            	border:1px solid #ff9900 !important;
            	background-color: #ff9900 !important;
            	line-height: 42rpx;
            	padding: 2rpx 20rpx;
            	border-radius: 32rpx;
            	font-size: 24rpx;
            	margin-top:-8px;
            	margin-left:20rpx;
                text-align: center;
            }
        }
    }

</style>
